<template>
  <div class="home">
    <ul>
      <li v-for="item in list" :key="item.id">
        <span class="one">
          <img :src="item.author.avatar_url" />
          <span>{{ item.reply_count }}/{{ item.visit_count }}</span>
          <span>{{ item.title }}</span>
        </span>
        <span>
          <img src="" alt="" />
          <span>几天前</span>
        </span>
      </li>
    </ul>
  </div>
</template>


<script>
export default {
  data() {
    return {
      list: [],
      all:''
    };
  },
  methods: {
    async getList() {
      let { data: res } = await this.$http.get(
        "https://cnodejs.org/api/v1/topics?tab="+this.all
      );
      this.list = res.data;
      // console.log(this.list);
    },
    auto(index) {
      this.flag = index;
    },
  },
  mounted() {
    this.all = this.$route.query.tab
    this.getList();
  },
};
</script>

<style>
ul {
  width: 100%;
  list-style: none;
  margin-top: 20px;
}
li {
  width: 100%;
  height: 50px;
  border-bottom: 1px solid gray;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.one span {
  margin-left: 5px;
}

</style>
